<template>
  <div class="test-main">
    <div id="blog-posts-events-demo">
      <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post
          v-for="post in posts"
          v-bind:key="post.id"
          v-bind:post="post"
          v-on:enlarge-text="post.FontSize += 0.1"
        ></blog-post>
      </div>
    </div>
    <div class="store-demo">
      <h1>store-demo</h1>
      <div>{{ count }}</div>
      <button @click="increase">store increase</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState({
      count: state => state.commonStore.count
    })
  },
  methods: {
    ...mapActions("commonStore", {
      add: "INCREMENT"
    }),
    increase(payload = 1) {
      this.add(payload);
    }
  },
  data() {
    return {
      posts: [
        { id: 1, title: "My journey with Vue" },
        { id: 2, title: "Blogging with Vue" },
        { id: 3, title: "Why Vue is so fun" }
      ],
      postFontSize: 1
    };
  },

  components: {
    BlogPost: () => import("@/components/BlogPost")
  },
  mounted() {
    // console.log('title', this.title)
  }
};
</script>

<style lang="scss">
.el-menu {
  width: 400px;
}
</style>
